<template>
    <pageTabelLayout>
        <template #pageHeader>
    <div class="search-form isheader" v-if="headerShow">
        <div>
            <a-form size="small" :model="dataForm" layout="inline">
                <a-form-item label="部门编号" :style="{ width: '270px' }" label-col-flex="70px">
                    <a-input allow-clear class="bacClass" v-model="dataForm.departmentCode" />
                </a-form-item>
                <a-form-item label="部门名称" :style="{ width: '270px' }" label-col-flex="70px">
                    <a-input allow-clear class="bacClass" v-model="dataForm.departmentName" />
                </a-form-item>
                <a-form-item label="员工编号" :style="{ width: '270px' }" label-col-flex="70px">
                    <a-input allow-clear class="bacClass" v-model="dataForm.userCode" />
                </a-form-item>
                <a-form-item label="员工姓名" :style="{ width: '270px' }" label-col-flex="70px">
                    <a-input allow-clear class="bacClass" v-model="dataForm.userName" />
                </a-form-item>
                <a-form-item label="开单日期" :style="{ width: '270px' }" label-col-flex="70px">
                    <a-date-picker  popup-container="html"  class="bacClass" v-model="dataForm.beginDate" />
                </a-form-item>
                <a-form-item label="至" :style="{ width: '270px' }" label-col-flex="70px">
                    <a-date-picker  popup-container="html"  class="bacClass" v-model="dataForm.endDate" />
                </a-form-item>
                <a-form-item label="班次" :style="{ width: '270px' }" label-col-flex="70px">
                    <a-select popup-container="html"  class="bacClass" :allowClear="true" v-model="dataForm.workteam" :filter-option="false"
                        allow-search>
                        <a-option>A班</a-option>
                        <a-option>B班</a-option>
                    </a-select>
                </a-form-item>
                <!-- <a-form-item label="组别" :style="{ width: '270px' }" label-col-flex="70px">
                    <a-input allow-clear class="bacClass" v-model="dataForm.sourceCode" />
                </a-form-item> -->
            </a-form>
        </div>

    </div>
    <div style="text-align: end;">
        <Toolbar :items="toolbarList" @select="selectHandler" @export="exports">
        </Toolbar>
    </div>
    <div class="my-divisders">
        <a-divider orientation="center">
            <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
            <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
    </div>
</template>
    <!-- <div class="gang"></div> -->
    <template #pageTabel>
        <a-tabs   :lazy-load="true" :justify="true" @change="tabsChanges">
            <a-tab-pane title="计件工资汇总查询" :key="1">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                style="height: calc(100% - 45px);" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList"
                    :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                    @change="PageSize" @page-size-change="change" style="justify-content: center"
                    :page-size="pagination.pageSize" :current="pagination.page" />
            </a-tab-pane>
            <a-tab-pane title="奖捐明细查询" :key="2">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady2"
                style="height: calc(100% - 45px);" :defaultColDef="defaultColDef2" class='ag-theme-alpine' :rowData="tableDataList2"
                    :columnDefs="tc2" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="total1" show-total show-jumper show-page-size
                    @change="PageSize" @page-size-change="change" style="justify-content: center"
                    :page-size="pagination2.pageSize" :current="pagination2.page" />
            </a-tab-pane>
        </a-tabs>
    </template>
</pageTabelLayout>
</template>
<script setup lang="ts">
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";
import { post, get } from "@/api/http"
import { localeText } from '@/api/aggridZw'

import Toolbar from "@/components/Toolbar.vue"
import { Message, Modal } from "@arco-design/web-vue"
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { EXELTABLE } from '@/utils/exportEXCEL'
import { pagingList } from "@/api/paging";
import { ref, reactive, onMounted, onActivated, onUnmounted, nextTick } from "vue";
const toolbarList: any = ref(['查询', '导出'])
let isIDs: any = ref(1);
onMounted(() => {
    // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
    // doRefresh();
    // selCxAll({});
    // 切换tap到本页面执行的方法
    // emitter.on("DevelopSampleRegistrationListDemo", () => {
    //     // selCxAll({});
    //     doRefresh();
    // });
    pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight - 100;
    }
});

function PageSize(val: any) {
    if (isIDs.value == 1) {
        pagination.page = val
        doRefresh();
    } else if (isIDs.value == 2) {
        pagination2.page = val
        doRefresh1();
    }
}

function change(val: any) {
    if (isIDs.value == 1) {
        pagination.pageSize = val
        doRefresh();
    } else if (isIDs.value == 2) {
        pagination2.pageSize = val
        doRefresh1();
    }
}


const headerShow = ref(true)

const tableDataList = ref([])
const tableDataList2 = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}

const gridOption2 = ref()
const gridReady2 = (params: any) => {
    gridOption2.value = params.api
}

const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
}

const defaultColDef2 = {
    sortable: true,
    resizable: true,
    filter: true,
}

const localeText1: any = ref(localeText)

const tc = [
    {
        showRowGroup: 'hide_def',
        "headerName": "",
        "checkboxSelection": true,
        "headerCheckboxSelection": true,
        "pinned": "left",
        "width": 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: "left",
    },
    {
        headerName: '部门',
        field: 'departmentName',
        width: 150,
        filter: 'departmentName',
    },
    {
        headerName: '员工工号',
        field: 'userCode',
        width: 150
    },
    {
        headerName: '员工姓名',
        field: 'userName',
        width: 150
    },
    {
        headerName: '工种',
        field: 'postName',
        width: 150
    },
    {
        headerName: '职责',
        field: 'position',
        width: 150
    },
    {
        headerName: '计件工资合计',
        field: 'pieceWageAmount',
        width: 150
    },
    {
        headerName: '奖捐合计',
        field: 'donationAmount',
        width: 150
    },
    {
        headerName: '合计',
        field: 'amount',
        width: 150
    },
]

const tc2 = [
    {
        showRowGroup: 'hide_def',
        "headerName": "",
        "checkboxSelection": true,
        "headerCheckboxSelection": true,
        "pinned": "left",
        "width": 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: "left",
    },
    {
        headerName: '奖捐日期',
        field: 'pieceDate',
        width: 150,
        filter: 'pieceDate',
    },
    {
        headerName: '员工工号',
        field: 'userCode',
        width: 150
    },
    {
        headerName: '员工姓名',
        field: 'userName',
        width: 150
    },
    {
        headerName: '部门名称',
        field: 'departmentName',
        width: 150
    },
    {
        headerName: '记录单号',
        field: 'recordCode',
        width: 150
    },
    {
        headerName: '开单日期',
        field: 'workteam',
        width: 150
    },
    {
        headerName: '班次',
        field: 'workteam',
        width: 150
    },
    // {
    //     headerName: '组别',
    //     field: 'unit',
    //     width: 150
    // },
    {
        headerName: '奖捐金额',
        field: 'amount',
        width: 150
    },
    {
        headerName: '备注',
        field: 'remark',
        width: 150
    },
]
const dataForm = reactive<{
    deleteState: any

    beginDate: any
    endDate: any
    userCode: any
    userName: any
    workteam: any
    departmentCode: any
    departmentName: any

    size: any
    page: any
}>({
    deleteState: 0,

    beginDate: '',
    endDate: '',
    userCode: '',
    userName: '',
    workteam: '',
    departmentCode: '',
    departmentName: '',

    size: 10,
    page: 1
});
const pageData = reactive<{
    pageLoading: boolean,
    rHeight: number,
}>({
    pageLoading: false,
    rHeight: 0,
});
const selectHandler = () => {
    if (tabsKeys.value == 1) {
        doRefresh()
    } else if (tabsKeys.value == 2) {
        doRefresh1()
    }
}
const tabsKeys = ref(1)
const tabsChanges = (e: any) => {
    tabsKeys.value = e
    if (e == 1) {
        toolbarList.value = ['查询', '导出']
    } else if (e == 2) {
        toolbarList.value = ['查询', '导出']
    }
}
// 1查询事件
const total = ref(0);
const total1 = ref(0);
const pagingList1: any = ref(pagingList)
function doRefresh() {
    pageData.pageLoading = true
    dataForm.page = pagination.page
    dataForm.size = pagination.pageSize
    post({
        url: "/dwPc/PostPiece/getUserPieceWage",
        data: dataForm,
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data.list);
                gridOption.value.setRowData(data.list)
                total.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}
// 2查询事件
function doRefresh1() {
    pageData.pageLoading = true
    dataForm.page = pagination2.page
    dataForm.size = pagination2.pageSize
    post({
        url: "/dwPc/PostPiece/getWorkshopDonation",
        data: dataForm,
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data.list);
                gridOption2.value.setRowData(data.list)
                total1.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}

const { selectedRowKeys, onSelectionChange } = useRowSelection();
const pagination = usePagination(doRefresh);
const pagination2 = usePagination(doRefresh1);
const table = useTable();
const rowKey = useRowKey("id");
// 导出
const exports1 = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
    } else {
        EXELTABLE(tc, gridOption.value.getSelectedRows(), '计件工资汇总')
    }

}
const exports2 = () => {
    if (gridOption2.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return;
    } else {
        EXELTABLE(tc2, gridOption2.value.getSelectedRows(), '奖捐明细')
    }

}
const exports = () => {
    if (tabsKeys.value == 1) {
        exports1()
    } else if (tabsKeys.value == 2) {
        exports2()
    }
}

</script>
<script lang="ts">
export default {
    name: "EmployeeSalaryQueryDemo",
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.DivFit {
    width: 100%;
    height: 20px;
    margin-left: 20px;
}

.DivFit div {
    float: left;
    width: 200px;
}

.isTable1 {
    margin: 50px;
    width: 90%;
    // margin: 0 auto;
    border: 1.2px solid #ccc;
    text-align: center;
    border-collapse: collapse;

    td {
        border: 1.2px solid #ccc;
    }

    th {
        border: 1.2px solid #ccc;
    }
}
</style>
